<template>
  <div class="g-container">
    <div id="dBanner"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as THREE from 'three'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500)
camera.position.set(0, 0, 100)
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

const material = new THREE.LineBasicMaterial({ color: 0x0000ff })

const points = []
points.push(new THREE.Vector3(-10, 0, 0))
points.push(new THREE.Vector3(0, 10, 0))
points.push(new THREE.Vector3(10, 0, 0))
points.push(new THREE.Vector3(0, -10, 0))
points.push(new THREE.Vector3(-10, 0, 0))

const geometry = new THREE.BufferGeometry().setFromPoints(points)

const line = new THREE.Line(geometry, material)

scene.add(line)

onMounted(() => {
  document.querySelector('#dBanner').appendChild(renderer.domElement)
  animate()
})

const animate = () => {
  requestAnimationFrame(animate)
  line.rotation.x += 0.01
  line.rotation.y += 0.01
  renderer.render(scene, camera)
}
</script>

<style scoped>
.g-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>
